<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>1table模块快速使用</title>
    <link th:href="@{/lib/layui/css/layui.css}" rel="stylesheet" href="/lib/layui/css/layui.css" media="all">
    <link th:href="@{/css/style.css}" rel="stylesheet" href="/css/style.css" media="all">
</head>
<body class="">
<div class="layui-container">

    <div th:replace="common/fragment :: search"></div>

    <div class="layui-row">
        <a class="layui-btn" href="/archives/add">添加</a>
    </div>
    <div class="layui-row">
        文章管理页面（layui.table）
        <table class="layui-table" lay-data="{height:315, url:'/archives/list', page:true, id:'test'}" lay-filter="test">
            <thead>
            <tr>
                <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                <th lay-data="{field:'title'}">标题</th>
                <th lay-data="{field:'title',templet: '#titleTpl'}">操作</th>
            </tr>
            </thead>
        </table>
    </div>

    <!--<div th:replace="common/fragment :: page"></div>-->
</div>

<script type="text/html" id="titleTpl">
    <a href="/archives/edit?id={{d.id}}" class="layui-table-link">编辑</a>
    <a href="javascript:;" lay-event="del" class="layui-table-link">删除</a>
</script>

<div th:replace="common/template :: footer"></div>
<div th:replace="common/template :: script"></div>
<script>
    layui.use(['element','table','jquery','layer'], function () {
        var $ = layui.jquery;
        var table = layui.table;

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //向服务端发送删除指令
                    $.post("/archives/delete",{id:data.id},function (resp) {
                        if (resp.code == 1) {
                            layer.msg("成功");
                            setTimeout(function () {
                                table.reload();
                            }, 1000);
                        }else{
                            layer.msg(resp.msg);
                        }
                    })
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            } else if(layEvent === 'LAYTABLE_TIPS'){
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });
    });
</script>
</body>
</html>